<template>
  <div class="d-flex justify-center">
    <v-expansion-panels
      v-model="panel.faq.value"
      multiple
      variant="accordion"
      class="pt-4 px-4 font-size-14 font-weight-500 line-height-140"
    >
      <v-expansion-panel>
        <v-expansion-panel-title @click="isHashTitle(Object.keys(panel.faq.map)[0])">
          <div>{{ i18n.faq?.account.title }}</div>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          <v-expansion-panels v-model="panel.account.value" variant="accordion" class="inside" multiple>
            <v-expansion-panel v-for="(i, index) in account" :key="index">
              <v-expansion-panel-title
                @click="isHashSubtitle(Object.keys(panel.faq.map)[0], panel.account.map, index)"
                class="line-height-135 inside-title"
              >
                {{ i.subtitle }}
              </v-expansion-panel-title>
              <v-expansion-panel-text class="mt-2">
                <div class="font-weight-400 pre-line">
                  {{ i.content }}
                </div>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-text>
      </v-expansion-panel>
      <v-expansion-panel>
        <v-expansion-panel-title @click="isHashTitle(Object.keys(panel.faq.map)[1])">
          <div>{{ i18n.faq?.features.title }}</div>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          <v-expansion-panels v-model="panel.features.value" variant="accordion" class="inside" multiple>
            <v-expansion-panel v-for="(i, index) in features" :key="index">
              <v-expansion-panel-title
                @click="isHashSubtitle(Object.keys(panel.faq.map)[1], panel.features.map, index)"
                class="line-height-135 inside-title"
              >
                {{ i.subtitle }}
              </v-expansion-panel-title>
              <v-expansion-panel-text class="mt-2">
                <div class="font-weight-400 pre-line">
                  {{ i.content }}
                </div>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-text>
      </v-expansion-panel>
      <v-expansion-panel>
        <v-expansion-panel-title @click="isHashTitle(Object.keys(panel.faq.map)[2])">
          <div>{{ i18n.faq?.contact.title }}</div>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          <v-expansion-panels v-model="panel.contact.value" variant="accordion" class="inside" multiple>
            <v-expansion-panel v-for="(i, index) in contact" :key="index">
              <v-expansion-panel-title
                @click="isHashSubtitle(Object.keys(panel.faq.map)[2], panel.contact.map, index)"
                class="line-height-135 inside-title"
              >
                {{ i.subtitle }}
              </v-expansion-panel-title>
              <v-expansion-panel-text class="mt-2">
                <div class="font-weight-400 pre-line">
                  {{ i.content }}
                </div>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-text>
      </v-expansion-panel>
      <v-expansion-panel>
        <v-expansion-panel-title @click="isHashTitle(Object.keys(panel.faq.map)[3])">
          <div>{{ i18n.faq?.about.title }}</div>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          <v-expansion-panels v-model="panel.about.value" variant="accordion" class="inside" multiple>
            <v-expansion-panel v-for="(i, index) in about" :key="index">
              <v-expansion-panel-title
                @click="isHashSubtitle(Object.keys(panel.faq.map)[3], panel.about.map, index)"
                class="line-height-135 inside-title"
              >
                {{ i.subtitle }}
              </v-expansion-panel-title>
              <v-expansion-panel-text class="mt-2">
                <div class="font-weight-400 pre-line">
                  {{ i.content }}
                </div>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
  <Jsonld :schema="schema"></Jsonld>
</template>
<script setup>
import { onMounted, reactive, ref, shallowRef, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels } from 'vuetify/components'
import Jsonld from '@/components/common/Jsonld.vue'
import { useI18nPack } from '@/compositions/request/i18nPack'

const account = ref([])
const features = ref([])
const contact = ref([])
const about = ref([])

const i18n = useI18nPack('support')
const route = useRoute()
const router = useRouter()

const title = ref('')
const subtitle = ref('')

// Jsonld 佈置
const schema = shallowRef(null)

onMounted(() => {
  if (route.hash) {
    const [first, second] = route.hash.slice(1).split(';')

    if (panel.faq && panel.faq.map[first] !== undefined) {
      const firstIndex = panel.faq.map[first]
      panel.faq.value.push(firstIndex)
    } else {
      router.replace({ hash: '' })
      return
    }

    if (panel[first] && panel[first].map[second] !== undefined) {
      const secondIndex = panel[first].map[second]
      panel[first].value.push(secondIndex)
    } else {
      router.replace({ hash: '' })
      return
    }

    title.value = first
    subtitle.value = second
  }
})

function isHashTitle(v) {
  router.replace({ hash: `#${v}` })
  title.value = v
}
function isHashSubtitle(value, map, index) {
  console.log('看看囉', Object.keys(map)[index])
  subtitle.value = Object.keys(map)[index]
  title.value = value
  if (subtitle.value === undefined) {
    const combinedValue = `${title.value}`
    router.replace({ name: 'mine', params: { to: 'faq' }, hash: `#${combinedValue}` })
  } else {
    const combinedValue = `${title.value};${subtitle.value}`
    router.replace({ name: 'mine', params: { to: 'faq' }, hash: `#${combinedValue}` })
  }
}

const panel = reactive({
  faq: {
    value: [],
    map: {
      account: 0,
      features: 1,
      contact: 2,
      about: 3,
    },
  },
  account: {
    value: [],
    map: {
      'forgot-password': 0,
      'delete-account': 1,
    },
  },
  features: {
    value: [],
    map: {
      'subscribe-reason': 0,
      'send-creator': 1,
      'profile-upload': 2,
      'delete-message': 3,
      'content-offensive': 4,
    },
  },
  contact: {
    value: [],
    map: {
      'customer-service': 0,
    },
  },
  about: {
    value: [],
    map: {
      fantasi: 0,
      feedback: 1,
      'porn-videos': 2,
      'pron-short-videos': 3,
      'pornographic-version-TikTok': 4,
      'what-is-Porntok': 5,
    },
  },
})

watch(
  () => panel.faq.value,
  (value) => {
    if (value.length === 0) {
      router.replace({ hash: '' })
    }
  },
)

watch(i18n, (newValue) => {
  console.log('Faq i18n:', newValue.faq)

  account.value = [
    { subtitle: newValue.faq.account.a.subtitle, content: newValue.faq.account.a.content },
    { subtitle: newValue.faq.account.b.subtitle, content: newValue.faq.account.b.content },
  ]
  features.value = [
    { subtitle: newValue.faq.features.a.subtitle, content: newValue.faq.features.a.content },
    { subtitle: newValue.faq.features.b.subtitle, content: newValue.faq.features.b.content },
    { subtitle: newValue.faq.features.c.subtitle, content: newValue.faq.features.c.content },
    { subtitle: newValue.faq.features.d.subtitle, content: newValue.faq.features.d.content },
    { subtitle: newValue.faq.features.e.subtitle, content: newValue.faq.features.e.content },
  ]
  contact.value = [{ subtitle: newValue.faq.contact.a.subtitle, content: newValue.faq.contact.a.content }]
  about.value = [
    { subtitle: newValue.faq.about.a.subtitle, content: newValue.faq.about.a.content },
    { subtitle: newValue.faq.about.b.subtitle, content: newValue.faq.about.b.content },
    { subtitle: newValue.faq.about.c.subtitle, content: newValue.faq.about.c.content },
    { subtitle: newValue.faq.about.d.subtitle, content: newValue.faq.about.d.content },
    { subtitle: newValue.faq.about.e.subtitle, content: newValue.faq.about.e.content },
    { subtitle: newValue.faq.about.f.subtitle, content: newValue.faq.about.f.content },
  ]

  const mapper = (v) => ({
    '@type': 'Question',
    name: v.subtitle,
    acceptedAnswer: {
      '@type': 'Answer',
      text: v.content,
    },
  })
  schema.value = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: [
      ...account.value.map(mapper),
      ...features.value.map(mapper),
      ...contact.value.map(mapper),
      ...about.value.map(mapper),
    ],
  }
})
</script>
<style lang="scss" scoped>
::v-deep(.v-expansion-panel--active > .v-expansion-panel-title) {
  min-height: auto;
}
::v-deep(.v-expansion-panel-title) {
  min-height: auto;
  height: auto;
  padding: 0;
}
::v-deep(.v-expansion-panel:not(:first-child)::after) {
  border-color: rgb(var(--v-theme-background));
}
::v-deep(.v-expansion-panel__shadow) {
  box-shadow: none;
}
::v-deep(.v-expansion-panel) {
  background-color: rgb(var(--v-theme-background));
}
::v-deep(.v-expansion-panel-text__wrapper) {
  padding: 0;
}
::v-deep(.v-expansion-panel-title__overlay) {
  opacity: 0 !important;
  margin-bottom: 0;
}
:v-deep(.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay) {
  opacity: 0 !important;
}
::v-deep(.v-expansion-panel-title--active > .v-expansion-panel-title__overlay) {
  opacity: 0;
}
::v-deep(.v-expansion-panel-title--active:hover > .v-expansion-panel-title__overlay) {
  opacity: 0;
}

// 第一層標題
.v-expansion-panel {
  margin-bottom: 1.5rem;
  &:last-child {
    padding-bottom: 0;
    margin-bottom: 1rem;
  }
  &.v-expansion-panel--active {
    padding-bottom: 0;
  }
}
// 第一層標題按鈕
::v-deep(.mdi-chevron-down::before) {
  content: url('@/assets/icons/svg/mine/arrow-down.svg');
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}
::v-deep(.mdi-chevron-up::before) {
  content: url('@/assets/icons/svg/mine/arrow-down.svg');
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  transform: rotate(180deg);
}

// 第二層標題按鈕
::v-deep(.inside .mdi-chevron-down::before) {
  content: url('@/assets/icons/svg/mine/add-active.svg');
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}
::v-deep(.inside .mdi-chevron-up::before) {
  content: url('@/assets/icons/svg/mine/reduce.svg');
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}

// 第三層內容
.inside {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--color-primary-divider, rgba(215, 215, 215, 0.4));
  margin-top: 1rem;
  &-title {
    color: rgb(var(--v-theme-primary));
  }
  ::v-deep(.v-expansion-panel) {
    padding: 0 1rem 1rem 1rem;
    margin-bottom: 0;
    &:last-child {
      margin-bottom: 0;
    }
    &:first-child {
      padding-top: 1rem;
    }
  }
  ::v-deep(.v-expansion-panel.v-expansion-panel--after-active) {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  ::v-deep(.v-expansion-panel.v-expansion-panel--active) {
    background-color: rgb(var(--v-theme-surface));
    border-radius: 0;
    padding: 1rem;
    border-bottom: 1px solid rgb(var(--v-theme-background));
  }
  &::v-deep(.v-expansion-panels--variant-accordion > .v-expansion-panel) {
    margin-bottom: 0;
  }
  ::v-deep(.v-expansion-panel--active > .v-expansion-panel-title) {
    color: white;
  }
}
</style>
